<template>
    <div class="header">
        <van-row justify="space-between">
            <van-col span="2">
                <van-icon name="bars" size="30px" class="icon" />
            </van-col>
            <van-col span="20">
                <van-search v-model="searchForm" shape="round" background="#ff5454" placeholder="请输入搜索关键词"
                    @search="onSearch" />
            </van-col>
            <van-col span="2">
                <van-icon name="contact" size="30px" class="icon" />
            </van-col>
        </van-row>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in categorydata" :key="image">
                <img :src="image" style="width: 100%; height: 240px;" />
            </van-swipe-item>
        </van-swipe>
        <!--通知栏-->
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
        <!--图标快捷键-->
        <div class="icons">
            <van-grid :column-num="5" :square="false" icon-size="40px" :border="false">
                <van-grid-item class="grids" v-for="value in iconimg" :key="value.text" :icon="value.img"
                    :text="value.text" />
            </van-grid>
        </div>
        <!--秒杀的布局-->
        <div class="productms">
            <van-row>
                <van-col span="6">
                    <div style="font-size: 20px; font-weight: 800; color:azure; padding-left: 15px; padding-top: 15px;">
                        华杉秒杀</div>
                    <span style="color: #fafbfb; font-weight: 600; padding-left: 15px; ">限时低价</span>
                    <div class="qg">
                        <span>去抢购 <van-icon name="play-circle" size="14px" /></span>

                    </div>
                </van-col>
                <van-col span="18" style="background-color: #fafbfb; ">
                    <van-grid :column-num="4" class="msgrid" icon-size="67px">
                        <van-grid-item class="pdata" v-for="item in productData" :key="item.id" :icon="item.img"
                            :text="item.price" />
                        <!-- <div v-for="item in productData" :key="item.id">
                            <img :src="item.img" width="80" height="80"><br>
                            <span>{{ item.price }}</span>
                        </div> -->
                    </van-grid>
                </van-col>
            </van-row>
        </div>
    </div>
    <!--商品内容区-->
    <van-grid :gutter="10" :column-num="2" style="margin-bottom:50px ;">
        <van-grid-item v-for="item in productlist" :key="item.id" class="productgrid"
            :to="{ name: 'productlist', query: { id: item.id } }">
            <!-- <div v-show="item.status == 1"> -->
                <van-image width="220" height="220" :src="item.img" />

                <span class="title">{{ item.name }}</span>

                <div style="margin-top: 5px; width: 220px;">
                    <span style="color:red; font-weight: 800; font-size:22px">￥{{item.price}}</span>
                    <!-- <div>123</div> -->
                    <van-row>
                        <van-col span="4">
                            <div style="background-color: red;">
                                <span style="color: white; font-size: 13px; font-weight: 600;">自营</span>
                            </div>
                        </van-col>
                        <van-col span="13">
                            <span style="color: #999999; padding-left: 10px;">1万+的评论</span>
                        </van-col>
                        <van-col span=" 5">
                            <div
                                style="border-radius:10px; background-color:#f2f2f2; height: 25px; width: 63px; text-align: center;">
                                看相似</div>
                        </van-col>
                    </van-row>
                </div>
            <!-- </div> -->
        </van-grid-item>
    </van-grid>



    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster" :to="({ name:'movecategory'})">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager" :to="({name:'home'})">个人</van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// import { CategoryApi } from '../api';
import {ProductApi} from '../api/index'
// 引入router
import { useRouter } from 'vue-router';
const router = useRouter()

const active = ref(0);
const searchForm = ref('')

const categorydata = ref([
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/6284/18/34581/53745/66f92062F22b5ae78/7e336c75f35e817e.jpg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])
const iconimg = ref([
    { img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '华杉超市' },
    { img:'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png',text:'华杉电器'},
    { img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: '服装美妆' },
    { img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: '充值中心' },
    { img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png', text: 'PLUS会员' },
])
const productData = ref([
    { id: 101, img: '//m.360buyimg.com/seckillcms/jfs/t1/260178/30/16806/98711/67a34db9Ff35a0a5f/321c74486e631115.jpg', price: '￥1698' },
    { id: 101, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/265039/12/5572/81164/67727205Fe6ee2cf3/62090e81bf6fa02f.jpg', price: '￥16.9' },
    { id: 101, img: '//m.360buyimg.com/seckillcms/jfs/t1/260178/30/16806/98711/67a34db9Ff35a0a5f/321c74486e631115.jpg', price: '￥1698' },
    { id: 101, img: 'https://m.360buyimg.com/seckillcms/jfs/t1/265039/12/5572/81164/67727205Fe6ee2cf3/62090e81bf6fa02f.jpg', price: '￥16.9' },
])
const productlist = ref([] as any)
// import axios from 'axios';

onMounted(() => { 
    //原始操作方式 并未封装
    // axios({
    //     url: 'http://localhost:8080/api/product/',
    //     method: 'get',
    // }).then((res: any) => {
    //     console.log(res)
    // })
    CallProductApi()

})

const CallProductApi=()=>{
// 自己封装的axios请求
    ProductApi.select.call().then((res:any)=>{
        console.log(res)
        //轮播图数据展示
        categorydata.value = res.map((item:any) => item.img)
        categorydata.value = categorydata.value.slice(0,6)
      
        //过滤出商品为上架状态的数据
       const items = res.filter((item: any) => {
            if (item.status == 1) {
                //  console.log(item);
                return item
            }
        })
        console.log(items);
       
        //秒杀商品图片
        productData.value = items.map((item: any) => {
            return {
                id: item.id,
                img: item.img,
                price: '￥' + item.price
            }
        })
        //截取数据
        productData.value = productData.value.slice(2, 6)
        console.log(productData.value);
        //商品列表数据
        productlist.value = items
       
    })
}


// const onProduct = () => {
//     console.log("点击商品");
//     router.push({ name: 'productlist',query:{id:}})
// }

const onSearch = () => { 
    console.log(searchForm.value, '搜索内容');
    
}
</script>

<style scoped>
.header{
    /* background-color: #ff5454; */
    height: 100%;
    /* margin-bottom: 5px; */
    background-image: linear-gradient(to bottom, #ff5454, transparent);
}
.icon{
    color: #f7f6f6;
    font-weight: 800;
    margin-left: 5px;
    margin-top: 10px;
}
.icons {
    border-radius: 22px;
    width: 450px;
    height: 107px;
    background-color: #f7f6f6;
    margin-left: 10px;
    margin-top: 3px;
    /* margin-bottom: 15px; */
}
.grids{
    margin-top: 5px;
    /* padding-left: 10px; */
    border-radius: 5px;
    padding-right: 5px;
   
}
.van-grid{
    padding-left: 3px;
}
:deep(.van-grid-item__content){
    background: #f7f6f6 !important;
}
.productms{
    border-radius: 18px;
    width: 450px;
    height: 107px;
    background-color: #f30a0a;
    margin-left: 10px;
    margin-top: 3px;
    .van-grid-item{
        width: 88px;
        height: 104px;
    }
    :deep(.van-grid-item__text){
        color: red;
    }
   
}

.qg{
    width: 68px;
    height: 20px;
    border-radius: 15px;
    margin-left: 15px;
    margin-top: 5px;
    background-color: #ffffff;
    span{
        color: #f30a0a;
        font-weight: 600;
        font-size: 12px;
        padding-left: 5px;
        text-align: center;
        line-height: 18px;
    }
    .van-icon{
        color: #f30a0a;
        padding-top: 3px;
    }
}
.msgrid{
    margin-top: 2px;
    .van-grid-item{

    }
}
.title{
    overflow: hidden; 
    text-overflow: ellipsis; /**如果超出了当前边框 那么就用.. 省略号代替 */
    display: -webkit-box; /**将当前对象设置为弹性盒子模型显示 */
    -webkit-line-clamp: 3; /**设置显示的行数 */
    -webkit-box-orient: vertical; /**s设置伸缩盒子对象的子元素排列的方式 */

}
:deep(.productgrid .van-grid-item__content){
    width: 220px !important;

}
</style>
<style>
/* .van-grid-item__content{
    border-radius: 10px;
} */

</style>